<template>
    <view class="custorm-service-container">
        <nav-bar title="常见问题"></nav-bar>
        <view class="custorm-service-body" v-html="content"></view>
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        // let questionList = [
        //     {
        //         title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //         content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //     },
        //     {
        //         title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //         content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //     },
        //     {
        //         title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //         content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //     },
        //     {
        //         title: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //         content: "客服微信:tongbanhuiben(工作日早9:00-18:00)",
        //     },
        // ];
        // let showContentList = new Array(questionList.length).fill(false);
        return {
            // questionList: questionList,
            // showContentList: showContentList,
            content: "",
        };
    },
    onLoad() {
        this.getData();
    },
    methods: {
        // itemClick(index) {
        //     let arr = Array.from(this.showContentList);
        //     if (!arr[index]) {
        //         arr.map((item, index) => {
        //             arr[index] = false;
        //         });
        //     }
        //     arr[index] = !arr[index];
        //     this.showContentList = arr;
        //     console.log(this.showContentList[index]);
        // },
        getData() {
            this.$u
                .post("get_rich_text", {
                    type: 0,
                })
                .then((res) => {
                    this.content = res.data.rich_text;
                });
        },
    },
};
</script>

<style scoped>
page {
    background-color: rgb(253, 253, 240);
}
.custorm-service-body {
    box-sizing: border-box;
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
    padding-bottom: 200rpx;
    font-size: 32rpx;
}
.custorm-service-list {
    box-sizing: border-box;
    padding: 40rpx;
    width: 100%;
    box-shadow: 0 0 10rpx #999;
}
.custorm-service-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 2rpx solid #999;
    padding-top: 40rpx;
}
.custorm-service-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    margin-bottom: 40rpx;
}
.custorm-service-item-bottom {
    height: 0rpx;
    transition: height 0.5s;
    overflow: hidden;
    font-size: 32rpx;
    font-weight: bold;
}
.custorm-service-item-bottom-active {
    height: 160rpx;
    transition: height 0.5s;
}
.custorm-service-item-image {
    height: 32rpx;
    width: 32rpx;
    transition: transform 0.5s;
}
.custorm-service-item-image-active {
    transform: rotate(90deg);
}
</style>
